<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_页面固定广告条</title>
    <style>
        .top{
            height: 120px;
            background-color: #5aa4ae;
            color: #fff;
            font-size: 30px;
            position: fixed;
            top:0;
            width: 100vw;
        }
        .left,.right{
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left{
            background-color: #FFF799;
            left: 20px;
        }
        .right{
            background-color: #F35336;
            right: 20px;

        }
        .main{
            margin-top: 130px;
        }
    </style>
</head>
<body>
<div class="top">我是顶部的广告条</div>
<div class="left">我是左侧的广告条</div>
<div class="right">我是右侧的广告条</div>
<div class="main"></div>
    我是内容
    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, alias aliquid animi cumque deserunt
            ducimus praesentium quia tempora voluptates? Ad amet animi, aut consequuntur maiores odit possimus ratione
            sapiente temporibus.
        </div>
        <div>A accusamus blanditiis deleniti dolore dolores, explicabo fugit inventore ipsam iure iusto, laudantium, maxime
            nihil perferendis placeat porro quae quia sapiente tempore tenetur totam ullam ut veritatis! Iste, quae vitae.
        </div>
        <div>Consequuntur debitis eaque facilis impedit incidunt natus, numquam odit quae quidem ratione rerum soluta
            suscipit vel veritatis voluptas. At debitis fuga hic incidunt libero minus neque, obcaecati quasi reprehenderit
            temporibus?
        </div>
        <div>Accusantium culpa cum fuga illum, maiores minus nam nobis nostrum obcaecati pariatur perspiciatis quam quasi
            quibusdam quo quod saepe ut voluptates. Alias atque consequuntur debitis delectus doloremque eum minima ut.
        </div>
        <div>Adipisci aliquid amet assumenda beatae dolor eius excepturi exercitationem ipsum maiores nostrum quam, quas
            quia quidem quod repellat, sed temporibus voluptatem! Aliquam dolorem facere fuga ipsum maiores nihil reiciendis
            voluptatum!
        </div>
        <div>Ab, ad aliquam animi assumenda deserunt dolorum ducimus eaque eius eos eum explicabo ipsum laborum nam
            necessitatibus nemo officia placeat porro qui quisquam ratione reprehenderit similique temporibus totam ut
            velit.
        </div>
        <div>Animi blanditiis consequuntur debitis distinctio eaque ex fuga ipsa maxime placeat possimus quis, sint tempora
            tempore veritatis voluptate voluptatem voluptatibus? Alias eaque eius eum illum nemo! Ea explicabo facilis vero.
        </div>
        <div>Accusantium aliquam amet deserunt eius facere illo odit officia sit suscipit totam? Dignissimos dolores eius
            eveniet facere fuga itaque labore nostrum nulla pariatur placeat quaerat quibusdam ratione repellendus, totam
            vel.
        </div>
        <div>Explicabo facilis impedit nam perspiciatis quae quaerat saepe? Explicabo, repellendus rerum? Earum est expedita
            explicabo laboriosam maiores minima mollitia nam omnis, quod ratione rem saepe soluta unde vel voluptatem
            voluptatum!
        </div>
        <div>Atque aut cum ducimus facilis laboriosam nihil, quos soluta unde. Consequuntur cum itaque iusto maxime neque
            perferendis repellat! Ipsa laborum natus nemo omnis optio perspiciatis placeat quae quis, tenetur vero.
        </div>
    </div>
</body>
</html>